<template>
  <div class="event_list">
    <div class="event" :key="index" v-for="(filterEvent, index) in filterEventList">
      <div class="flex">
        <a-select style="width: 240px;" v-model="filterEvent.event" :disabled="disabled">
          <a-select-option v-for="item in eventList" :key="item.name" :value="item.name">{{item.displayName}}</a-select-option>
        </a-select>
        <a-select  value="0" style="margin-left: 10px;width: 100px;" :disabled="disabled">
          <a-select-option value="0">总次数</a-select-option>
        </a-select>
        <div style="width: 160px;margin-left: 10px;">
          大于等于
        </div>
        <a-input-number v-model="filterEvent.count" style="width: 100px;" :disabled="disabled" />
        <div style="margin-left: 10px;">次</div>
        <a-button v-if="type==='edit'" @click="addRule(filterEvent)" type="link"><a-icon type="plus" />筛选条件</a-button>
        <a-button v-if="filterEventList.length > 1 && type==='edit'" @click="removeRule(index)" type="link">删除</a-button>
      </div>
      <MultiLevelFilter :datasourceId="projectId" :disabled="disabled" v-if="filterEvent.showFilter" v-model="filterEvent.filter" v-bind:properties="properties" />
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { baseMixin } from '@/store/app-mixin';
import MultiLevelFilter from "@/views/components/Filter/newLevel/MultiLevelFilter.vue";

export default {
    name: 'EventRule',
    mixins: [baseMixin],
    components: {
      MultiLevelFilter
    },
    props: {
      projectId: String,
      type: String,
    },
    data () {
      return {
        filterEventList: [],
        eventList: [],
        properties: [],
        rules: [],
      }
    },
    computed: {
      disabled() {
        return this.type==='view';
      }
    },
    mounted () {
      this.init();
    },
    methods: {
      ...mapActions('projectManage', ['getEventList', 'getUserProperties', 'getEventProperties']),
      init() {
        this.getEventList(this.projectId).then(res => {
          this.eventList = res;
          if (this.$route.name === 'OperationPlanManageAdd') {
            this.filterEventList = [{
              showFilter: false,
              filter: {},
              event: this.eventList[0].name,
              count: 1
            }];
          }
        });
        this.getUserProperties(this.projectId).then(res => {
          this.properties = [...this.properties, ...res];
        });
        this.getEventProperties(this.projectId).then(res => {
          this.properties = [...this.properties, ...res];
        });
      },
      addEvent() {
        this.filterEventList.push({
          showFilter: false,
          event: this.eventList[0].name,
          count: 1,
          filter: {}
        });
      },
      removeRule(index) {
        this.filterEventList = this.filterEventList.filter((item, itemI) => index !== itemI);
      },
      validate() {
        const hasEmpty = this.filterEventList.some(res => {
          if (res.showFilter) {
            return res.filter.rules.some(rule => {
              return !rule.operator || !rule.property || (!rule.value && !rule.values.length);
            });
          }

          return false;
        });

        if (hasEmpty) {
          this.$message.warning('请完善筛选条件');
        }

        return !hasEmpty;
      },
      addRule(filterEvent) {
        if (filterEvent.showFilter) {
          filterEvent.filter.rules.push({
            operator: 'equal',
            values: [],
            index: filterEvent.filter.rules.length,
          });
        } else {
          filterEvent.filter =  {
            condition: 'AND',
            rules: [{
              operator: 'equal',
              index: 0,
              values: []
            }]
          };
          filterEvent.showFilter = true;
          this.filterEventList = [...this.filterEventList];
        }
      },
      getRuleData() {
        const matcher_list = this.filterEventList.map(item => {
          const data = {
            event: item.event,
            mesure: {
              name: 'count',
              value: item.count,
            },
            operator: "greater",
          };

          if (item.showFilter) {
            data.filter = {
              condition: item.filter.condition,
              rules: item.filter.rules,
            }
          }

          return data;
        });

        return {
          condition: 'OR',
          matcher_list
        };
      },
      setRuleData(obj) {
        this.filterEventList = obj.matcher_list.map(item => {
          return {
            event: item.event,
            count: item.mesure.value,
            filter: item.filter,
            showFilter: !!item.filter,
          };
        });
      }
    }
  }
</script>

<style scoped>
.plan_list {
  width: 100%;
}

.event_list {
  
}

.flex {
  display: flex;
  align-items: center;
}
</style>